<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部搜索框 -->
        <el-header class="BGeader">
          <el-row style="margin-top: 15px">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <!-- 搜索信息 -->
                <el-form
                  ref="form"
                  :inline="true"
                  size="small"
                  :model="params"
                >
                  <el-row :gutter="20">
                    <el-form-item label="关键字">
                      <el-input
                        v-model="params.keyword"
                        placeholder="根据文章标题搜索"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="状态"
                      prop="state"
                      size="small"
                    >
                      <el-select
                        class="filter-item"
                        placeholder="请选择"
                        clearable
                        v-model="params.state"
                      >
                        <el-option
                          v-for="(item,index) in state"
                          :key="index"
                          :value="item.value"
                          :label="item.label"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-row>
                        <el-button
                          plain
                          @click="hClear"
                        >清除</el-button>
                        <el-button
                          size="small"
                          type="primary"
                          @click="hSearch"
                        >查询</el-button>
                        <el-button
                          type="success"
                          style="margin-left: 400px"
                          @click="hAdd"
                        ><i class="el-icon-edit"></i> 新增技巧</el-button>
                      </el-row>
                    </el-form-item>
                  </el-row>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <!-- 提示信息条数 -->
        <el-alert
          :title="alertText"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom:20px"
        ></el-alert>

        <!-- 表格 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
        >
          <el-table-column
            label="序号"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="文章标题"
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
              <i
                class="el-icon-film icon"
                v-if="scope.row.videoURL !==null"
                @click="hVideo(scope.row.videoURL)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column
            label="阅读数"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{scope.row.visits}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="录入人"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="录入时间"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{scope.row.createTime | parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="状态"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <span>{{scope.row.state == 1?'已启用':'已禁用'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="hPreview(scope.row)"
              >
                预览
              </el-button>
              <el-button
                type="text"
                @click="hState(scope.row)"
              >
                {{scope.row.state?'禁用':'启用'}}
              </el-button>
              <el-button
                type="text"
                :disabled='scope.row.state == 0'
                @click="hEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                :disabled='scope.row.state == 0'
                @click="hDel(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div style="overflow: hidden; margin-top:20px">
          <el-pagination
            background
            style="float:right;"
            @size-change="handleSizeChange"
            layout=" prev, pager, next, sizes,jumper"
            :page-size="form.pagesize"
            :page-sizes="[10,20,30,50]"
            :total="total"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 视频预览 -->
      <el-dialog
        title="视频预览"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="60%"
      >
        <Video
          v-if="showDialog"
          :videoUrl='videoUrl'
        />
      </el-dialog>

      <!-- 新增编辑 -->
      <el-dialog
        :title="isEdit?'编辑文章':'新增文章'"
        :visible.sync="articlesDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="50%"
      >
        <Article
          v-if="articlesDialog"
          @add='doAdd'
          @close='articlesDialog = false'
          :data='data'
          :isEdit='isEdit'
        />
      </el-dialog>

      <!-- 文章预览 -->
      <el-dialog
        title="文章预览"
        :visible.sync="previewDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="50%"
      >
        <Preview
          v-if="previewDialog"
          :previewData='previewData'
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles'
import Video from '@/module-hmmm/components/articles-video'
import Article from '@/module-hmmm/components/articles-add'
import Preview from '@/module-hmmm/components/articles-preview'
import { status } from '@/api/hmmm/constants'
export default {
  components: {
    Video,
    Article,
    Preview
  },
  data () {
    return {
      form: {
        page: 1, // 页码
        pagesize: 10 // 每页数据
      },
      params: {
        keyword: '', // 关键字
        state: '' // 状态
      },
      listLoading: false,
      state: status,
      tableData: [], // 文章数据
      alertText: '', // 总条数
      total: 0, // 总条数
      showDialog: false, // 控制视频弹框显示隐藏
      videoUrl: '', // 视频链接
      articlesDialog: false, // 新增或编辑弹框
      isEdit: false, // 当前是添加还是编辑
      previewDialog: false, // 预览文章
      data: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: null // 视频链接
      },
      previewData: {} // 预览的文章数据
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    async getArticleList (params) {
      this.listLoading = true
      const res = await list({ ...this.form, ...params })
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
      this.alertText = `共${this.total}条记录`
      this.listLoading = false
    },
    // 删除 请求
    async doDel (id) {
      try {
        const res = await remove({ id: id })
        console.log(res)
        this.$message.success('删除成功') // 请提示
        if (this.tableData.length === 1) {
          this.form.page--
          if (this.form.page === 0) {
            this.form.page = 1
          }
        }
        this.getArticleList() // 重新发请求,
      } catch (err) {
        this.$message.error(err)
      }
    },
    // 禁用启用
    async doState (row) {
      try {
        const res = await changeState({ id: row.id, state: Number(!row.state) })
        console.log(res)

        if (row.state === 0) {
          this.$message.success('修改为启动状态成功')
        } else {
          this.$message.success('修改为禁用状态成功')
        }
        this.getArticleList()
      } catch (err) {
        this.$message.error('修改状态失败')
      }
    },
    hState (row) {
      if (row.state === 0) {
        this.doState(row)
      } else {
        this.$confirm('您确定禁用吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 2.发请求,删除数据
          this.doState(row)
        }).catch(() => {
          this.$message.info('您取消了禁用')
        })
      }
    },
    // 添加文章
    hAdd () {
      this.isEdit = false
      this.articlesDialog = true
    },
    // 编辑文章
    hEdit ({ title, articleBody, videoURL, id }) {
      this.isEdit = true
      this.articlesDialog = true
      this.data = { title, articleBody, videoURL, id }
    },
    // 删除 方法
    hDel (id) {
      this.$confirm('您确定删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 2.发请求,删除数据
        this.doDel(id)
      }).catch(() => {

      })
    },
    // 搜索
    hSearch () {
      if (this.params.keyword === '' && this.params.state === '') {
        this.getArticleList()
      } else {
        this.form.page = 1
        this.getArticleList(this.params)
      }
    },
    // 清除
    hClear () {
      this.params = {
        keyword: '',
        state: ''
      }
      this.getArticleList()
    },
    // 视频弹框
    hVideo (URL) {
      this.showDialog = true
      this.videoUrl = URL
    },
    // 调整每页数量
    handleSizeChange (val) {
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.getArticleList(this.form)
      }
    },
    // 修改当前页数
    pageChange (curPage) {
      this.form.page = curPage
      this.getArticleList() // 在次发请求
    },
    // 添加文章
    doAdd () {
      this.articlesDialog = false // 关闭弹框
      this.getArticleList() // 重新请求数据
    },
    // 预览文章
    hPreview (row) {
      this.previewDialog = true
      this.previewData = row
    }
  }
}
</script>

<style scoped>
.icon {
  color: blue;
  margin-left: 5px;
}
/* /deep/.el-dialog__header {
  padding: 40px 20px 10px;
} */
</style>
